<!doctype html>
<html>
<meta charset="UTF-8">
<head>
	<title>伪元素实现尖角边框</title>
</head>
<style>
	#triangle{
		margin-top: 20px;
		width: 0;
		height: 0;
		border-top: 20px solid red;
		border-right: 20px solid green;
		border-bottom: 20px solid blue;
		border-left: 20px solid yellow; 
	}
	.top{
		width:0px;  
    	height:0px;
		border: 20px transparent solid;
		border-bottom-color: red;
	}
	.left{
		width:0px;  
    	height:0px;
		border: 20px transparent solid;
		border-right-color: green;
	}
	.right{
		width:0px;  
    	height:0px;
		border: 20px transparent solid;
		border-left-color: blue;
	}
	.bottom{
		width:0px;  
    	height:0px;
		border: 20px transparent solid;
		border-top-color: yellow;
	}
	span{
		margin: 0 20px 0 10px;
	}
	.demo{
		float: left;
		margin-right: 20px; 
		width: 200px;
		height: 200px;
		border: 2px solid #000;
		position: relative;
	}
	.demo::before,.demo::after{
		content: '';
		border: transparent solid;
		position: absolute;
		left: 100%;
	}
	.demo::before{
		border-width: 10px;
		border-left-color: #000;
		top: 20px;
	}
	.demo::after{
		border-width: 8px;
		border-left-color: #FFF;
		top: 22px;
	}
	.demoTop{
		float: left;
		width: 200px;
		height: 200px;
		border: 2px solid #000;
		position: relative;
	}
	.demoTop::before,.demoTop::after{
		content: '';
		border: transparent solid;
		position: absolute;
		bottom: 100%;
	}
	.demoTop::before{
		border-width: 10px;
		border-bottom-color: #000;
		left: 20px;
	}
	.demoTop::after{
		border-width: 8px;
		border-bottom-color: #FFF;
		left: 22px;
	}
</style>
<body>
	<div class="demo"></div>
	<div class="demoTop"></div>
	<div style="float:left">
		<div id="triangle"></div>
			<h3>若需要哪个方向的三角形，先把四个边的边框设为透明border: 20px transparent solid;最后只显示需要的方向的颜色</h3>
			<div class="top"></div>
			<div class="left"></div>
			<div class="right"></div>
			<div class="bottom"></div>
			<h3>以下是span标签的效果，为什么左右缺了个角</h3>
			<span class="top"></span>
			<span class="left"></span>
			<span class="right"></span>
			<span class="bottom"></span>
	<div>
</body>
</html>